<template>
  <div class="tu" ref="mapcontainer"></div>
</template>
<script setup>
import { onMounted, ref, shallowRef } from 'vue'
import * as echarts from 'echarts'
import { getmap } from '../../request/index'
console.log('import.meta.env', import.meta.env)
const mapcontainer = shallowRef()

const mapData = shallowRef([
  {
    adcode: 100000,
    mapname: '中国'
  }
])
console.log(mapData)

const init = (adcode, mapname) => {
  getmap(adcode)
    .then((res) => {
      var myChart = echarts.init(mapcontainer.value)
      echarts.registerMap(mapname, res.data)
      let option = ref({
        title: {
          text: `${mapname}地图`,
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}<br/>{c} (人)'
        },
        //左下角  带上颜色值就会改变地图颜色
        // visualMap: {
        //   min: 0,
        //   max: 100,
        //   text: ['High', 'Low'],
        //   realtime: false,
        //   itemWidth: 10, // 缩小 visualMap 的宽度
        //   itemHeight: 100,
        //   calculable: true,
        //   inRange: {
        //     color: ['lightskyblue', 'yellow', 'orangered']
        //   }
        // },
        series: [
          {
            name: '中华民族共和国',
            type: 'map',
            //别的写法
            // type: 'map',
            // map: 'test', //上面那个注册地图的时候也写这个名字  关键在于后面的数据
            map: mapname,
            zoom: 1.2,
            // roam: true,
            label: {
              show: true,
              textStyle: {
                color: '#fff',
                fontSize: '8px'
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              // areaColor: '#fcc'
              normal: {
                areaColor: '#00BAFF'
              },
              emphasis: {
                areaColor: '#fcc',
                //高亮阴影
                shadowColor: 'rgba(0, 90, 128, 0.708)',
                //阴影度
                shadowBlur: 20
              }
            },
            data: [{ name: '中西区', value: 20057.34 }]
          }
        ]
      })
      option.value.series[0].data = res.data.features.map((item, index) => {
        return {
          name: item.properties.name,
          value: item.properties.childrenNum,
          adcode: item.properties.adcode
        }
      })
      myChart.setOption(option.value)
      //
      myChart.off('click', onclick)
      myChart.off('contextmenu', oncontextmenu)
      myChart.on('click', function (params) {
        console.log(params)
        mapData.value.push({
          adcode: params.data.adcode,
          mapname: params.data.name
        })
        init(params.data.adcode, params.data.name)
      })
      myChart.on('contextmenu', function (params) {
        if (mapData.value.length == 1) {
          alert('不能后退了')
          return
        }
        params.event.stop()
        mapData.value.pop()
        const { adcode, mapname } = mapData.value[mapData.value.length - 1]
        console.log(adcode, mapname)
        init(adcode, mapname)
      })
      //适配
      window.addEventListener('resize', function () {
        myChart.resize()
      })
    })
    .catch((err) => {
      console.log(err)
    })
}

onMounted(() => {
  init(100000, '中国')
})
</script>


<style scoped lang='scss'>
.tu {
  width: 100%;
  height: 620px;
}
</style>
